
import { useIntersectionObserver } from '@vueuse/core'
// 默认图片地址
import defImg from '@/assets/images/200.png'
export default {
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 进入可视区后 把binding.value的图片地址赋值给img标签的src属性
              el.src = binding.value
              // 图片加载失败后 显示默认图片
              el.onerror = () => {
                el.src = defImg
              }
              // 监控一次后停止
              stop()
            }
          }
        )
      }
    })
  }
}
